<template>
  <c-table
    border
    header-row-class-name="mutiple-table-header"
    v-bind="$attrs"
    :columns="columns"
    :data="data"
  >
    <template v-slot:risk_type_name="scope">
      <c-select
        v-model="scope.row.risk_type"
        number-key
        placeholder="选择项目状态"
        :options="enumRiskType"
        @change="handleEdit(scope.row, 'risk_type')"
      ></c-select>
    </template>

    <template v-slot:overdue_funds="scope">
      <input
        type="text"
        class="form-control text-center"
        placeholder="填写逾期金额"
        :value="scope.row.overdue_funds"
        v-input-number="{ min: 0, max: +scope.row.reply_funds || 99999999, fixed: 4 }"
        @blur="e => handleEditBlur(e, scope.row, 'overdue_funds')"
      />
    </template>

    <template v-slot:bank_risk_content="scope">
      <input
        type="text"
        class="form-control text-center"
        placeholder="填写"
        :value="scope.row.bank_risk_content"
        @blur="e => handleEditBlur(e, scope.row, 'bank_risk_content')"
      />
    </template>

    <template v-slot:bank_risk_rate="scope">
      <input
        type="text"
        class="form-control text-center"
        placeholder="填写"
        :value="scope.row.bank_risk_rate"
        @blur="e => handleEditBlur(e, scope.row, 'bank_risk_rate')"
      />
    </template>

    <template v-slot:gov_risk_content="scope">
      <input
        type="text"
        class="form-control text-center"
        placeholder="填写"
        :value="scope.row.gov_risk_content"
        @blur="e => handleEditBlur(e, scope.row, 'gov_risk_content')"
      />
    </template>

    <template v-slot:gov_risk_rate="scope">
      <input
        type="text"
        class="form-control text-center"
        placeholder="填写"
        :value="scope.row.gov_risk_rate"
        @blur="e => handleEditBlur(e, scope.row, 'gov_risk_rate')"
      />
    </template>

    <template v-slot:db_risk_content="scope">
      <input
        type="text"
        class="form-control text-center"
        placeholder="填写"
        :value="scope.row.db_risk_content"
        @blur="e => handleEditBlur(e, scope.row, 'db_risk_content')"
      />
    </template>

    <template v-slot:db_risk_rate="scope">
      <input
        type="text"
        class="form-control text-center"
        placeholder="填写"
        :value="scope.row.db_risk_rate"
        @blur="e => handleEditBlur(e, scope.row, 'db_risk_rate')"
      />
    </template>

    <template v-slot:due_compen_funds="scope">
      <input
        type="text"
        class="form-control text-center"
        placeholder="填写"
        :value="scope.row.due_compen_funds"
        @blur="e => handleEditBlur(e, scope.row, 'due_compen_funds')"
      />
    </template>

    <template v-slot:compened_funds="scope">
      <input
        type="text"
        class="form-control text-center"
        placeholder="填写"
        :value="scope.row.compened_funds"
        @blur="e => handleEditBlur(e, scope.row, 'compened_funds')"
      />
    </template>

    <template v-slot:overdue_date="scope">
      <el-date-picker
        v-model="scope.row.overdue_date"
        type="date"
        placeholder="选择"
        value-format="yyyy-MM-dd"
        @change="handleEdit(scope.row, 'overdue_date')"
      ></el-date-picker>
    </template>

    <template v-slot:compen_grace_days="scope">
      <input
        type="text"
        class="form-control text-center"
        placeholder="填写"
        :value="scope.row.compen_grace_days"
        v-input-number="{ min: 0, max: 9999, fixed: 0 }"
        @blur="e => handleEditBlur(e, scope.row, 'compen_grace_days')"
      />
    </template>

    <template v-slot:compen_date="scope">
      <el-date-picker
        v-model="scope.row.compen_date"
        type="date"
        placeholder="选择"
        value-format="yyyy-MM-dd"
        @change="handleEdit(scope.row, 'compen_date')"
      ></el-date-picker>
    </template>

    <template v-slot:risk_reason="scope">
      <input
        type="text"
        class="form-control text-center"
        placeholder="填写"
        :value="scope.row.risk_reason"
        @blur="e => handleEditBlur(e, scope.row, 'risk_reason')"
      />
    </template>

    <template v-slot:gua_person="scope">
      <input
        type="text"
        class="form-control text-center"
        placeholder="填写"
        :value="scope.row.gua_person"
        @blur="e => handleEditBlur(e, scope.row, 'gua_person')"
      />
    </template>

    <template v-slot:gua_thing="scope">
      <input
        type="text"
        class="form-control text-center"
        placeholder="填写"
        :value="scope.row.gua_thing"
        @blur="e => handleEditBlur(e, scope.row, 'gua_thing')"
      />
    </template>

    <template v-slot:gua_method_remark="scope">
      <input
        type="text"
        class="form-control text-center"
        placeholder="填写"
        :value="scope.row.gua_method_remark"
        @blur="e => handleEditBlur(e, scope.row, 'gua_method_remark')"
      />
    </template>

    <template v-slot:process_compen="scope">
      <input
        type="text"
        class="form-control text-center"
        placeholder="填写"
        :value="scope.row.process_compen"
        @blur="e => handleEditBlur(e, scope.row, 'process_compen')"
      />
    </template>

    <template v-slot:recover_funds="scope">
      <input
        type="text"
        class="form-control text-center"
        placeholder="填写"
        :value="scope.row.recover_funds"
        @blur="e => handleEditBlur(e, scope.row, 'recover_funds')"
      />
    </template>

    <template v-slot:recover_funds_person="scope">
      <input
        type="text"
        class="form-control text-center"
        placeholder="填写"
        :value="scope.row.recover_funds_person"
        @blur="e => handleEditBlur(e, scope.row, 'recover_funds_person')"
      />
    </template>

    <template v-slot:gov_risk_funds="scope">
      <input
        type="text"
        class="form-control text-center"
        placeholder="填写"
        :value="scope.row.gov_risk_funds"
        @blur="e => handleEditBlur(e, scope.row, 'gov_risk_funds')"
      />
    </template>

    <template v-slot:db_risk_funds="scope">
      <input
        type="text"
        class="form-control text-center"
        placeholder="填写"
        :value="scope.row.db_risk_funds"
        @blur="e => handleEditBlur(e, scope.row, 'db_risk_funds')"
      />
    </template>

    <template v-slot:other_funds="scope">
      <input
        type="text"
        class="form-control text-center"
        placeholder="填写"
        :value="scope.row.other_funds"
        @blur="e => handleEditBlur(e, scope.row, 'other_funds')"
      />
    </template>
  </c-table>
</template>

<script>
import { enumRiskType } from '@/credit/views/city/report/reportMixins'

export default {
  components: {},
  props: {
    columns: Array,
    data: Array,
  },
  data() {
    return {
      enumRiskType,
      tableName: 'risk_project',
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    handleEditBlur(e, row, key) {
      const { value } = e.target
      const rowValue = row[key]

      if (value === rowValue || (!value && !rowValue)) {
        return
      }

      const data = {
        [key]: value,
      }

      this.editData(row, data)
    },
    handleEdit(row, key) {
      const data = {
        [key]: row[key],
      }

      this.editData(row, data)
    },
    editData(row, data) {
      if (!row.id) {
        data.customer_related_id = row.customer_related_id
        this.addData(data)
      } else {
        this.updateData(row.id, data)
      }
    },
    updateData(id, data) {
      this.$api
        .updateData(this.$serviceName, this.tableName, id, data)
        .then(res => {
          this.$emit('edit', res)
        })
        .catch(() => {
          this.$message.error('修改失败！')
        })
    },
    addData(data) {
      this.$api
        .addData(this.$serviceName, this.tableName, data)
        .then(res => {
          this.$emit('edit', res)
        })
        .catch(() => {
          this.$message.error('修改失败！')
        })
    },
  },
}
</script>

<style lang="scss" scoped></style>
